<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=sc, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="box"></div>
    <script>
        //
        var str = '2023-08-24 22:0:00';
        //计算-差值--分钟--毫秒
        // 一秒打印一次

        setInterval(function () {
            var now = new Date();
            var targetDate = new Date(str);

            // 目标时间-当前时间 --时间差
            var res = targetDate - now;
            console.log(res);
            //相差 总的 秒
            var secsCount = parseInt(res / 1000);
            //余 的秒数
            var secs = secsCount % 60;

            //相差 总的 分钟
            var miusCount = parseInt(secsCount / 60);

            // 余分钟
            var mius = miusCount % 60;

            var hoursCount = parseInt(miusCount / 60)


            // secs = secs > 10 ? secs : ('0' + secs);


            var showStr = addZero(hoursCount) + '时' + addZero(mius) + '分' + addZero(secs) + '秒';

            // 字符串显示到 div中
            box.innerHTML = showStr;



        }, 100)

        function addZero(secs) {
            return secs = secs > 10 ? secs : ('0' + secs)

        }
    </script>
</body>

</html>